<!--管理员管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">管理员管理</span>
    <el-button @click="beforeAddaddadmin"
               type="primary" style="float:right;margin-top:13px;">新建管理员</el-button>
  </div>
  <!-- 新增管理员弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible"
             style="width:1000px;padding:40px;" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="角色">
            <el-select placeholder="请选择" v-model="saveaddadminForm.role">
              <el-option label="停车场A管理员" value="1"></el-option>
              <el-option label="停车场B管理员" value="2"></el-option>
              <el-option label="停车场C管理员" value="3"></el-option>
              <el-option label="停车场D管理员" value="4"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  label="添加人" >
            <el-input class="custom-input" v-model="saveaddadminForm.username" :value="fixedValue"  readonly ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col  :span="7" label="状态">
          <el-select placeholder="请选择状态" v-model="saveaddadminForm.jurisdiction">
            <el-option v-for="item in leaderOptions" :label="item.power" :value="item.id"  ></el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveaddadmin">确定</el-button>
    </template>
  </el-dialog>
  <!-- 管理员搜索卡片 -->
  <el-card style="margin:20px;height: 70px;" >
    <el-form :inline="true">
      <el-form-item label="角色" :span="6">
        <el-input placeholder="请输入内容" style="width:220px;"
                  v-model="searchaddadminForm.role" @keydown.enter="loadaddadmin"></el-input>
      </el-form-item>
      <el-form-item label="添加人" :span="6">
        <el-input placeholder="请输入内容" style="width:220px;"
                  v-model="searchaddadminForm.username" @keydown.enter="loadaddadmin"></el-input>
      </el-form-item>
      <el-form-item label="状态"  style="width: 150px">
        <el-select placeholder="请选择状态" v-model="searchaddadminForm.status" >
          <el-option v-for="item in leaderOptions" :label="item.power" :value="item.id"  ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadRole">查询</el-button>
      </el-form-item>
    </el-form>


  </el-card>
  <!-- 管理员列表 -->
  <el-card style="margin:20px;">
    <el-table :data="addadminArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="name" label="账号" align="center"/>
      <el-table-column prop="role" label="角色" align="center"/>
      <el-table-column prop="username" label="添加人" align="center"/>
      <el-table-column prop="AddTime" label="添加时间" align="center"/>
      <el-table-column prop="EndTime" label="最后登录时间" align="center"/>
      <el-table-column prop="status" label="管理员状态" align="center"
                       :formatter="addadminStatusFormatter"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editaddadmin(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small" @click="deleteaddadmin(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import {ElMessage} from "element-plus";
import axios from "axios";

//页面加载完毕,立即加载管理员数据
onMounted(()=>{
  //加载管理员数据
  loadaddadmin();
})

//控制新增管理员弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('新增管理员');
const leaderOptions = ref([
  {power:'上线',id:'101'},
  {power:'下线',id:'102'},

]);
//点击"新建管理员"按钮,让弹窗出现且改标题
const beforeAddaddadmin = ()=>{
  dialogTitle.value = "新建管理员";
  dialogVisible.value = true;
  saveaddadminForm.value = {};
}

//定义对象用来保存搜索条件 品牌 车牌号
const searchaddadminForm = ref({role:"",username:"",status:""});
//定义数组用来保存管理员数据
const addadminArr = ref([
  {id:1,name:'tom', role:'停车场A管理员',username:'tom',AddTime:'2024-10-01',EndTime:'2024-05-01',status:1},
  {id:2,name:'李四',role:'停车场B管理员',username:'tom',AddTime:'2024-10-01',EndTime:'2024-05-01',status:2}
]);
//定义加载管理员列表的方法
const loadaddadmin = ()=>{
  ElMessage.success('加载管理员列表成功');
}

//定义重置按钮上的方法
const resetSearch = ()=>{
  searchaddadminForm.value = {};
  loadaddadmin();
}

//定义查询按钮的实现
const loadRole=()=>{

}


//定义一个管理员状态转换的方法
const addadminStatusFormatter = (row,column,cellValue,index)=>{
  if(cellValue == 1){
    cellValue = '有效';
  }else if(cellValue == 2){
    cellValue = '有效';
  }
  return cellValue;
}



//定义处理弹窗关闭的方法
const handleClose = ()=>{
  if(confirm('您确认要关闭本弹窗吗?')){
    dialogVisible.value = false;
    saveaddadminForm.value={};
  }
}

//定义对象用来保存管理员表数据
const saveaddadminForm = ref({
  role:'',
  username:'',
  jurisdiction:'',
})

//定义保存管理员的方法
const saveaddadmin = ()=>{
  //测试打印数据
  console.log(saveaddadminForm.value);
  addadminArr.value.push(saveaddadminForm.value);
  //关闭弹窗
  dialogVisible.value = false;
  //清空弹窗中的数据
  saveaddadminForm.value={};

}
//定义一个编辑管理员的方法
const editaddadmin = (row)=>{
  //将数据给到弹窗
  saveaddadminForm.value=row;
  //弹窗显示
  dialogVisible.value = true;
  //修改弹窗标题
  dialogTitle.value = "编辑管理员";
}

const fixedValue =["admin"];

//定义删除管理员的方法
const deleteaddadmin = ()=>{

}
</script>







